<!-- home -->
<template>
	<div class="home">
		<el-container id="main-box">
			<el-header>
				<el-avatar
					src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
				></el-avatar>
				<span class="username">
					<strong>{{ username }}</strong></span
				>

				<router-link to="/admin/welcome" tag="h2">Vue后台管理系统</router-link>
				<el-button type="primary" size="small" @click="logoutFn">退出</el-button>
			</el-header>
			<el-container>
				<el-aside :width="isAside ? 64 + 'px' : 250 + 'px'" default-active="1">
					<div class="show-aside" @click="isAsideFn">|||</div>
					<el-menu
						ref="menu"
						:collapse="isAside"
						:collapse-transition="false"
						background-color="#545c64"
						text-color="#fff"
						active-text-color="#ffd04b"
						:router="true"
						:unique-opened="true"
					>
						<el-submenu
							:index="menuDataList.id"
							v-for="menuDataList in menuDataLists"
							:key="menuDataList.id"
						>
							<template slot="title">
								<i class="el-icon-location"></i>
								<span slot="title">{{ menuDataList.title }}</span>
							</template>
							<el-menu-item
								v-for="menuDataItem in menuDataList.children"
								:key="menuDataItem.id"
								:index="menuDataItem.path"
								>{{ menuDataItem.title }}</el-menu-item
							>
						</el-submenu>
					</el-menu>
				</el-aside>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
//import <组件名称> from '<组件路径>';
import { menuDataLists } from '@/mock/menu.json';
import { removeToken } from '@/utils/auto.js';
export default {
	//注册import导入的组件
	components: {},
	//数据
	data() {
		return {
			menuDataLists,
			isAside: false,
		};
	},
	//计算属性
	computed: {
		username() {
			const username = window.localStorage.getItem('username');
			const level = window.localStorage.getItem('level');
			if (level == '0') return `普通用户:${username}`;
			else if (level == '1') return `学生:${username}`;
			else if (level == '2') return `教师:${username}`;
			else if (level == '3') return `超级管理:${username}`;
			else return '登陆呀';
		},
	},
	//侦听器
	watch: {},
	//方法
	methods: {
		isAsideFn() {
			this.isAside = !this.isAside;
		},
		logoutFn() {
			this.$confirm('你确定要退出账号吗？？？？', '提示', {
				confirmButtonText: '退出',
				cancelButtonText: '再想想',
				type: 'warning',
			})
				.then(() => {
					this.$message({
						type: 'success',
						message: '已退出账号!',
					});
					removeToken();
					localStorage.removeItem('username');
					localStorage.removeItem('level');
					this.$router.push('/login');
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退出！',
					});
				});
		},
	},
	created() {},
	mounted() {},
};
</script>
<style lang="less" scope>
#main-box {
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
.el-main {
	background-color: #eaedf1;
}
.el-aside {
	overflow: hidden;
	.show-aside {
		background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
		width: 100%;
		height: 30px;
		text-align: center;
		line-height: 30px;
		cursor: pointer;
		user-select: none;
	}
	.el-menu {
		background-color: #333744;
		height: 100%;
		color: #fff;
		.el-menu-item.is-active {
			background-color: #61646d;
		}
	}
}

.el-header {
	display: flex;
	background-image: linear-gradient(to right, #30cfd0 0%, #330867 100%);
	padding: 0 100px;
	.el-avatar {
		margin-top: 10px;
	}
	.username {
		font-size: 16px;
		padding-left: 10px;
		line-height: 60px;
		strong {
			font-size: 20px;
			vertical-align: middle;
		}
	}
	h2 {
		flex: 3;
		text-align: center;
		line-height: 60px;
		cursor: pointer;
		user-select: none;
	}
	.el-button {
		margin-top: 13px;
		margin-bottom: 13px;
	}
}
</style>
